import { formatOptions } from './formatter';
import type { Options, BaseNameValueObject } from './type';

interface YData extends BaseNameValueObject {
  children?: YData[] | null;
}

interface TreeMapChartProps {
  visualMap?: any;
  options: Options;
  yData: YData[];
}

export const createTreeMapOption = ({
  visualMap,
  options,
  yData
}: TreeMapChartProps) => {
  options = formatOptions(options);

  const defaultVisualMap = {
    min: 0,
    realtime: false,
    calculable: false,
    show: false
  };
  let finalVisualMap = defaultVisualMap;
  if (visualMap) {
    finalVisualMap = Object.assign(defaultVisualMap, visualMap);
  }

  return {
    visualMap: finalVisualMap,
    tooltip: {
      trigger: 'item',
      showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
      backgroundColor: 'rgba(0, 0, 0, 0.6)', // 背景颜色
      padding: 8,
      borderRadius: 6, // 边框圆角
      borderWidth: 0, // 边框宽度
      formatter: (params: any) => {
        let itemStr = '';
        const number = params.value;
        const unit = options.labelUnit || '';

        itemStr += `<div class="row" style="margin-top: 0">
          <div class="name">${params.name}：</div>
          <div class="value">
            <div class="value-inner">
              <span class="unit">${unit}</span>
              <span class="number">${number}</span>
            </div>
          </div>
        </div>`;

        const str = `<div class="chart-tooltip tree-map">
          ${itemStr}
        </div>`;

        return str;
      }
    },
    series: [
      {
        type: 'treemap',
        nodeClick: false, // 点击节点是否放大
        roam: false, // 是否开启拖拽漫游（移动和缩放）
        breadcrumb: {
          show: false
        }, // 面包屑
        width: '100%',
        height: '100%',
        emphasis: {
          disabled: false
        }, // 是否开启高亮
        itemStyle: {
          gapWidth: 1
        },
        label: {
          show: true,
          position: 'insideTopLeft',
          color: '#fff',
          fontSize: 14,
          lineHeight: 22,
          fontWeight: 'normal',
          fontFamily: 'PingFang SC, sans-serif',
          formatter: (val: any) => {
            const title = val.data.name;
            const value = val.data.value;
            const str =
              title +
              '\n' +
              `{a|${value}}` +
              ' ' +
              `{b|${options.labelUnit || ''}}`;
            return str;
          },
          rich: {
            a: {
              fontSize: 16,
              lineHeight: 26,
              fontFamily: 'number, sans-serif'
            },
            b: {
              fontSize: 13,
              lineHeight: 20,
              fontFamily: 'PingFang SC, sans-serif'
            }
          }
        },
        data: yData,
        animation: false
      }
    ]
  };
};
